<template>
    <div>
        <el-form ref="form" :model="form" :rules="myrules" label-width="80px">
            <el-form-item label="优惠券名称" prop="name" :label-width="formLabelWidth">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="优惠券类型" prop="parentid" :label-width="formLabelWidth">
                <el-select @change="changeselect" class="select" v-model="form.parentid" placeholder="请选择优惠券类型">
                    <el-option label="满减" :value="1"></el-option>
                    <el-option label="无门槛" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="满减条件" prop="condition" :label-width="formLabelWidth">
                <el-input :disabled="flag" placeholder="满减必须输入条件" v-model="form.condition"></el-input>
            </el-form-item>
            <el-form-item label="折扣金额" prop="price" :label-width="formLabelWidth">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="时间" prop="time" :label-width="formLabelWidth">
                <el-date-picker
                    v-model="time"
                    type="daterange"
                    @blur="outblur"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth">
                <el-button type="primary" @click="onSubmit">发行</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import url from '../../assets/js/baseurl';
export default {
    data() {
        return {
            flag: true,
            form: {
                name: '',
                parentid: '',
                condition: '',
                price: '',
                startTime: '',
                endTime: ''
            },
            time: '',
            formLabelWidth: '100px',
            myrules: {
                name: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
                parentid: [{ required: true, message: '请选择优惠券类型', trigger: 'blur' }],
                price: [{ required: true, message: '请输入商品名', trigger: 'blur' }]
            }
        };
    },
    methods: {
        onSubmit: async function () {
            try {
                if (!this.form.startTime) {
                    this.$message.error('请选择日期');
                    throw '日期不能为空';
                }
                if (this.form.parentid == 1) {
                    this.myrules.condition = [{ required: true, message: '请输入满减条件', trigger: 'blur' }];
                }
                await this.$refs.form.validate();
                let res = await this.$http.post(`${url.lxy}/coupon`, this.form);
                if (res.data.code) {
                    this.$message.success(res.data.msg);
                } else {
                    this.$message.error(res.data.msg);
                }
            } catch (error) {
                console.log(error);
            }
        },
        changeselect: function (val) {
            if (val == 2) {
                this.flag = true;
                this.form.condition = ''
            }
            if (val == 1) {
                this.flag = false;
            }
        },
        outblur: function () {
            this.form.startTime = new Date(this.time[0]).getTime();
            this.form.endTime = new Date(this.time[1]).getTime();
            let currentdate = new Date(new Date().toLocaleDateString()).getTime();
            if (currentdate > this.form.startTime) {
                this.time = '';
                this.form.startTime = '';
                this.$message.error('生效时间不得早于今天');
            }
        }
    }
};
</script>

<style  scoped>
.select {
    width: 100%;
}
</style>